import { debounce } from "@/app/utils";
import { customization, personalDetails } from "./initialState";
import { createWithEqualityFn } from "zustand/traditional";
import { produce } from "immer";

export type CustomizationState = { customization: Customization };

export type CustomizationActions = {
  update: (content: any) => void;
  add?: (content: any) => void;
  delete?: (content: any) => void;
  updateLayout: (data: Layout) => void;
  updateSectionOrder: (data: SectionOrder) => void;
  updateTemp: (data: Customization) => void;
  updateHeader: (data: Header) => void;
  updateSpacing: (data: Spacing) => void;
  updateColors: (data: Colors) => void;
  updatetTitle: (data: Title) => void;
  updateAccentColor: (data: string[]) => void;
  addCustomization: (resumeId: number) => void;
  updateColumnWidth: (colWidthsFromDetails: ColWidthsFromDetails) => void;
};

export type CustomizationStore = CustomizationState & CustomizationActions;

export const defaultInitState = customization;

export const createCustomizationStore = (initState = defaultInitState) => {
  return createWithEqualityFn<CustomizationStore>()((set) => ({
    customization: initState,
    update: (data) => {
      set(() => ({ customization: data }));
    },
    updateLayout: (data) => {
      set((state) => ({
        customization: {
          ...state.customization,
          layout: data,
        },
      }));
    },
    updateColumnWidth: (data) => {
      set((state) => ({
        customization: {
          ...state.customization,
          layout: {
            ...state.customization.layout,
            colWidthsFromDetails: data,
          },
        },
      }));
    },
    updateSpacing: (data) => {
      set((state) => ({
        customization: {
          ...state.customization,
          spacing: data,
        },
      }));
    },
    updateSectionOrder: (data) => {
      set((state) => ({
        customization: {
          ...state.customization,
          sectionOrder: produce(data, (draft) => {
            draft.one.leftSectionChildren = [
              ...new Set(draft.one.leftSectionChildren),
            ];
            draft.two.leftSectionChildren = [
              ...new Set(draft.two.leftSectionChildren),
            ];
            draft.two.rightSectionChildren = [
              ...new Set(draft.two.rightSectionChildren),
            ];
          }),
        },
      }));
    },
    updateTemp: (data: Customization) => {
      set((state) => ({
        customization: {
          ...state.customization,
          ...data,
        },
      }));
    },
    updateHeader: (data: any) => {
      set((state) => ({
        customization: {
          ...state.customization,
          header: {
            ...state.customization.header,
            ...data,
          },
        },
      }));
    },
    updateColors: (data: any) => {
      set((state) => ({
        customization: {
          ...state.customization,
          colors: data,
        },
      }));
    },
    updatetTitle: (data: Title) => {
      set((state) => ({
        customization: {
          ...state.customization,
          title: data,
        },
      }));
    },
    updateAccentColor: (data: any) => {
      set((state) => ({
        customization: {
          ...state.customization,
          applyAccentColor: data,
        },
      }));
    },
    addCustomization: debounce(async (resumeId) => {
      // const { customization } = useCustomizationStore.getState();
      // await addCustomization({
      //   resumeId,
      //   customization,
      // });
      // const data = await getResumeDetail({ id: resumeId });
      // hydrateStore(data.data);
    }, 800),
  }));
};
